<template>
  <div class="login" :style="winSize">
    <el-row>
      <!--      <div class="title0">辉耀人力资源管理系统</div>-->
      <el-col :span="24">
        <div class="content">
          <el-form
            label-position="left"
            label-width="0px"
            class="demo-ruleForm card-box loginform"
            :class="{ 'fade-in': isFormVisible }"
            v-loading="login_actions.disabled"
            :element-loading-text="'正在登录...'"
            :model="data"
            :rules="rule_data"
            ref="data"
          >
            <h3 class="title">
              <span>辉耀人力资源管理系统</span>
            </h3>
            <el-form-item prop="username">
              <el-input
                type="text"
                auto-complete="off"
                placeholder="账号"
                v-model="data.username"
              ></el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                type="password"
                auto-complete="off"
                placeholder="密码"
                v-model="data.password"
                @keyup.native.enter="onLogin('data')"
              ></el-input>
            </el-form-item>

            <el-form-item class="btn-group">
              <el-button type="primary" @click="onLogin('data')">
                登录
              </el-button>
              <!--              <el-button @click="resetForm('data')">重置</el-button>-->
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import md5 from 'md5';
import { AdminUserApi } from '@/api';

export default {
  data() {
    return {
      isFormVisible: false,
      winSize: {
        width: '100%',
        height: '100%',
      },
      login_actions: {
        disabled: false,
      },
      data: {
        username: '',
        password: '',
      },

      rule_data: {
        username: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入用户名'));
              } else {
                callback();
              }
            },
            trigger: 'blur, change',
          },
        ],
        password: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                callback();
              }
            },
            trigger: 'blur, change',
          },
        ],
      },
    };
  },
  methods: {
    onLogin(ref) {
      const self = this;
      self.$refs[ref].validate(async (valid) => {
        if (valid) {
          try {
            const response = await AdminUserApi.login(
              self.data.username,
              self.data.password
            );
            sessionStorage.setItem('authorization', response.result.token);
            this.$store.commit('SET_USER_INFO', response.result.userInfo);
            self.$router.push('/');
          } catch (e) {
            console.error('登陆失败：' + JSON.stringify(e));
            this.$message.error('登陆失败：' + JSON.stringify(e));
          }
        }
      });
    },
    resetForm(ref) {
      this.$refs[ref].resetFields();
    },
    fadeInForm() {
      setTimeout(() => {
        this.isFormVisible = true; // 设置表单为可见状态，触发淡入动画
      }, 500); // 可调整延迟时间以控制动画开始时机
    },
  },
  mounted() {
    this.fadeInForm();
  },
};
</script>
<style scope lang="less">
@import 'index';
</style>
